﻿@using System.Threading;
@using Microsoft.Azure.IoTSuite.Connectedfactory.WebApp.Helpers
@using Microsoft.Azure.IoTSuite.Connectedfactory.WebApp.Security
@using GlobalResources

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    @* Adjust the viewport width as per device width *@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="@Url.Content("~/content/favicon.ico")" type="image/x-icon" />
    <title>@Strings.DefaultSolutionName</title>
    <script type="text/javascript">
        var cultureInfo = '@Culture';
        var cultureInfoShort = '@Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName'
    </script>

    @* Load scripts bundles *@
    @Scripts.Render("~/bundles/scripts")

    @* Load page specific scripts *@
    @RenderSection("scripts", required: false)

    @* Load style sheets bundles *@
    @Styles.Render("~/Content/css")

</head>
<body>
    @Html.AntiForgeryToken();
    <header>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <a href="#pushPanel" class="skip">Skip to content</a>
            <h1 id="content" class="container-fluid">
                <div id="accountMenu" class="collapse navbar-collapse">
                    <ul class="path overflow">
                        <li id="title"></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="masthead_text overflow">@Strings.MicrosoftAzureIoTSuite - @Strings.DefaultSolutionName</li>

                        <li id="language-menu" class="dropdown">
                            <a id="language" href="#" aria-label="dropdown-language-menu" class="dropdown-toggle dropdown-highligth" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                <span class="masthead_language_icon"></span>
                            </a>
                            <ul class="dropdown-menu">
                                @{ int i = 1;}
                                @foreach (var language in CultureHelper.GetLanguages())
                                {
                                    if (language.IsCurrent)
                                    {
                                        <li role="row" class="active">
                                            <a role="gridcell" aria-posinset="@i" aria-setsize="@CultureHelper.GetLanguages().Count()">@language.Name</a>
                                        </li>
                                    }
                                    else
                                    {
                                        <li role="row">
                                            <a role="gridcell" aria-posinset="@i" aria-setsize="@CultureHelper.GetLanguages().Count()" href="@Url.Action("SetCulture", "Culture", new { cultureName = language.CultureName })" onclick="return languageChanged();">@language.Name</a>
                                        </li>
                                    }
                                    i++;
                                }
                            </ul>
                        </li>
                        <li id="account-menu" class="dropdown">
                            <a href="#" aria-label="dropdown-account-menu" class="dropdown-toggle masthead_account_container" tabindex="0" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                <span class="masthead_account_avatar"></span>
                                <span class="masthead_account">
                                    <span class="masthead_account_name overflow">@PrincipalHelper.GetEmailAddress(User)</span>
                                    @if (User.IsInRole("Admin"))
                                    {
                                        <span class="masthead_account_subtitle overflow">@Strings.AdministratorRole</span>
                                    }
                                    else if (User.IsInRole("ReadOnly"))
                                    {
                                        <span class="masthead_account_subtitle overflow">@Strings.ReadOnlyRole</span>
                                    }
                                    else
                                    {
                                        <span class="masthead_account_subtitle overflow">@Strings.ImplicitReadOnlyRole</span>
                                    }
                                </span>
                            </a>
                            <ul class="dropdown-menu masthead_account_menu" role="menu">
                                <li role="presentation">
                                    <a href="@Url.Action("SignOut", "Account")" role="menuitem" tabindex="0">@Strings.SignOut</a>
                                </li>
                                <li role="separator" class="divider"></li>
                                <li role="presentation">
                                    <a href="https://portal.azure.com/#blade/Microsoft_Azure_Support/HelpAndSupportBlade" target="_blank" role="menuitem" tabindex="0">@Strings.LinkLabelHelpAndSupport</a>
                                </li>
                                <li role="presentation">
                                    <a href="http://feedback.azure.com/forums/321918-azure-iot" target="_blank" role="menuitem" tabindex="0">@Strings.LinkLabelHelpGiveFeedback</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </h1>
        </div>
    </header>
    <section class="page">

        @Html.Action("NavigationMenu", "Navigation")

        <main class="container-fluid">
            <div id="pushPanel">
                @RenderBody()
            </div>
        </main>

        <div id="loadingElement" class="loader_container">
            <div class="loader_container__loader"></div>
        </div>

        <div id="dashboardContextPanelLeft" class="overlay"></div>

    </section>

    <script>
        $("#hamburger").click(function () { toggleContextPanelHamburger(); });

        $("#title").text(title);

        function languageChanged() {
            sessionStorage.setItem("languageChanged", "true");
            return true;
        }
        
        function toggleContextPanelHamburger() {
            if ($('.push_left').length) {
                $("#dashboardContextPanelLeft").addClass("overlay-close");
                $("#pushPanel").removeClass("push_left");
                $(".navbar").removeClass("navbar-left");
                $('.navigation_link').removeClass("navigation_link_text");
            }
            else {
                $("#dashboardContextPanelLeft").removeClass("overlay-close").addClass("overlay-left-open");
                $("#pushPanel").addClass("push_left");
                $(".navbar").addClass("navbar-left");
                $('.navigation_link').addClass("navigation_link_text");
            }
        }

        $(document).on('keydown', function (event) {
            if ( event.keyCode === 27 ) { // ESC
                if ($('.push_left').length) {
                    $("#dashboardContextPanelLeft").addClass("overlay-close");
                    $("#pushPanel").removeClass("push_left");
                    $(".navbar").removeClass("navbar-left");
                    $('.navigation_link').removeClass("navigation_link_text");
                }
                else if ($('.dropdown').length){
                    $("#account-menu").removeClass("open");
                    $("#language-menu").removeClass("open");
                }
            }
        });

        $(document).on('mouseenter', ".overflow", function (event) {
            var $this = $(this);
            if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
                $this.tooltip({
                    title: $this.text(),
                    placement: "top",
                    container: 'body'
                });
                $this.tooltip('show');
            }
        }).on('mouseleave', ".overflow", function () {
            $('.tooltip').tooltip('destroy');
        });

        function openRDXExplorerLink(url) {
            window.open(url);
        }

        function linkRDXExplorer(aggregationView, keyNode) {
            // Variable which is still available in deferred done promise for this function.
            var rdxUrl;
            return $.post({
                url: "/WebMethod/RDXLink",
                data: { __RequestVerificationToken: $('[name=__RequestVerificationToken]').val(), key: keyNode, view: aggregationView },
                success: function onSuccess(response) {
                    rdxUrl = response;
                },
                error: function (response) {
                    console.error("error getting Rdx link: ", response.d, response.responseText);
                }
            });
        }

        var marginLeft;
        // The length of the text inside the button (and the button length)
        // changes with the languages.
        // Left margin is set accordingly to text length.
        function checkButtonTextLength() {
            var textLength = @Strings.BrowserTrustButton.Length;
            if (textLength > 10) {
                marginLeft = "110px";
            } else {
                marginLeft = "150px";
            }
        }

    $(document).ready(function () {
        checkButtonTextLength();

            // bind a click event to the 'skip' link
            $(".skip").click(function(event){
    
                // strip the leading hash and declare
                // the content we're skipping to
                var skipTo = "#pushPanel";
    
                // Setting 'tabindex' to -1 takes an element out of normal 
                // tab flow but allows it to be focused via javascript
                $(skipTo).attr('tabindex', -1).on('blur focusout', function () {
    
                    // when focus leaves this element, 
                    // remove the tabindex attribute
                    $(this).removeAttr('tabindex');
    
                }).focus(); // focus on the content container
            });
            if (sessionStorage.getItem("languageChanged") == "true") {
                $("#language").focus();
                sessionStorage.setItem("languageChanged", "false");
            }
        });

    </script>
</body>
</html>
